<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      left-text="个人资料"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 头像选择表单元素 -->
    <input type="file" ref="file" hidden @change="onFileChange"/>
    <!-- 头像 -->
    <van-cell-group class="user-info">
      <van-cell title="头像：" is-link @click="$refs.file.click()">
        <van-image class="avatar" fit="cover" round :src="user.photo" />
      </van-cell>
      <van-cell class="edit-name" title="姓名：" :value="localName" is-link  @click="isUpdateNameShow = true">
            <van-field
              v-if="isUpdateNameShow"
              v-model.trim="localName"
              type="input"
              maxlength="7"
              show-word-limit
              placeholder="请输入昵称"
           ><van-button slot="button" size="small" type="info" @click="btnNameOK">确认</van-button>
           </van-field>
      </van-cell>
      <van-cell @click="showPicker = true" title="性别：" :value="gender === 0 ? '男': '女'" is-link>
        <van-field
          v-if="showPicker"
          readonly
          clickable
          :value="gender"
        />
      </van-cell>
      <van-cell title="生日" :value="user.birthday" is-link @click="isUpdateBirthdayShow=true" />
      <van-cell title="手机号码：" :value="mobile" is-link></van-cell>
      <van-cell title="服务区域：" value="内容" is-link></van-cell>
      <van-cell title="详细地址：" value="内容" is-link></van-cell>
      <van-cell title="手机验证码：">
        <van-button square color="#3f51b5" size="mini">获取验证码</van-button>
      </van-cell>
    </van-cell-group>

    <van-button @click="$router.back()" class="save" type="primary" color="#3f51b5" block
      >保存</van-button
    >
        <!-- 编辑生日 -->
        <van-popup
          v-model="isUpdateBirthdayShow"
          position="bottom" style="height: 100%;"
        >
          <update-birthday
            v-if="isUpdateBirthdayShow"
            v-model="user.birthday"
            @close="isUpdateBirthdayShow=false"
          />
        </van-popup>
         <!-- 编辑头像 -->
        <van-popup
          v-model="isUpdatePhotoShow"
          position="bottom" style="height: 100%;"
        >
          <update-photo
            v-if="isUpdatePhotoShow"
            :img="img"
            @close="isUpdatePhotoShow=false"
            @update-photo="user.photo = $event"
          />
        </van-popup>
        <!-- 性别弹层 -->
        <van-popup v-model="showPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="genderOK"
          />
        </van-popup>
  </div>
</template>
<script>
import { getUserProfile, updateUserProfile } from "@/api/ident"
import UpdatePhoto from './components/update-photo'
import UpdateBirthday from './components/update-birthday'
// import dayjs from 'dayjs'
export default {
  name: "UserProfile",
  components: {
    UpdatePhoto,
    UpdateBirthday
  },
  props: {},
  data() {
    return {
      user: {},
      img: null,
      localName: '',
      isUpdateNameShow: false,
      isUpdateBirthdayShow: false,
      isUpdatePhotoShow: false,
      gender: '',
      showPicker: false,
      columns: ['男', '女'],
      mobile: null
    }
  },
  created() {
    this.loadUserProfile()
  },
  computed: {},
  methods: {
    async loadUserProfile() {
      try {
        const { data: { data } } = await getUserProfile()
        this.user = data
        this.localName = data.name
        this.gender = data.gender
        this.mobile = data.mobile
      } catch (err) {
        this.$toast("获取数据失败")
      }
    },
    onFileChange () {
      // 获取文件对象
      const file = this.$refs.file.files[0]
      // 基于文章对象获取到 blob 数据
      this.img = window.URL.createObjectURL(file)
      console.log(this.img)
      this.isUpdatePhotoShow = true
      // file-input 如果选了同一个文件不会触发 change 事件
      // 解决办法就是每次使用完毕，把它的 value 清空
      this.$refs.file.value = ''
    },
    async btnNameOK () {
      this.$toast.loading({
        message: '保存中...',
        forbidClick: true,
        duration: 0
      })
      try {
        if (!this.localName.length) {
          return this.$toast('昵称不能为空')
        }
        await updateUserProfile({
          name: this.localName
        })
        this.$toast.success('更新成功')
        this.isUpdateNameShow = false
      } catch (err) {
        this.$toast('操作失败')
      }
    },
    async genderOK(value) {
      this.$toast.loading({
        message: '保存中...',
        forbidClick: true,
        duration: 0
      })
      try {
        this.gender = this.columns.indexOf(value)
        await updateUserProfile({
          gender: this.gender
        })
        this.$toast.success('更新成功')
        this.showPicker = false
      } catch (err) {
        this.$toast('操作失败')
      }
    }
  }
}
</script>
<style lang="scss">
.user-profile {
  .avatar {
    overflow: hidden;
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  .page-nav-bar {
    background-color: #3f51b5;
    .van-icon,
    .van-nav-bar__text {
      color: #fff;
    }
  }
}
.save {
  position: absolute;
  bottom: 0;
}
.user-info {
  margin-left: 0, 15px;
  .van-cell {
    border-bottom: 3px solid #ebedf0;
  }
}
.edit-name{
  .van-cell__value{
  flex: 4;
  }
}
</style>
